<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44">
            <template #action="{ record }">
              <TableAction
                :divider="true"
                :actions="[
                  {
                    color: 'success',
                    label: '查看明细',
                    onClick: () => onMore(record),
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
  import { defineOptions, h } from 'vue';

  import { BasicTable, TableAction, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE } from '@/api/http';
  import { useRouter } from 'vue-router';
  import { Flex } from 'ant-design-vue';

  import profit1 from '@/assets/img/profit-1.png';
  import profit0 from '@/assets/img/profit-0.png';

  defineOptions({ name: 'StockReview' });

  const router = useRouter();

  const [registerTable] = useTable({
    api: PAGE('/product/stockCountPages'),
    columns: [
      {
        title: '盘点单号',
        dataIndex: 'stockCheckCode',
        ellipsis: false,
      },
      {
        title: '盘点人',
        dataIndex: 'operator',
        ellipsis: false,
      },

      {
        title: '盘点时间',
        dataIndex: 'createTime',
        ellipsis: false,
      },

      {
        title: '库存数量',
        dataIndex: 'num',
        customRender: ({ value }) => `${value || '0'}`,
      },

      {
        title: '盘点数量',
        dataIndex: 'countNum',
        ellipsis: false,
        customRender: ({ value }) => `${value || '0'}`,
      },

      {
        title: '是否有差异',
        dataIndex: 'isDiff',
        ellipsis: false,
        customRender: ({ value, record }) => {
          let { num, countNum } = record;
          value ||= 0;

          return h(Flex, { align: 'center', justify: 'center' }, [
            h('span', null, value === 0 ? '无' : '有'),
            /*
            value === 1 &&
              h('img', {
                style: { width: '16px' },
                src: countNum > num ? profit1 : profit0,
              }),
            * */
          ]);
        },
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'stockCheckCode',
    actionColumn: {
      title: '操作',
      align: 'center',
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  function onMore({ stockCheckCode, createBy, createTime }) {
    const content = btoa(
      encodeURIComponent(JSON.stringify({ stockCheckCode, createBy, createTime })),
    );
    router.push(`/stock/list/review/detail?content=${content}`);
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
</style>
